<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户列表</title>
		<script type="text/javascript" src="../layui/layui.js"></script>
		<link rel="stylesheet" href="../layui/css/layui.css">
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
		<link rel="stylesheet" type="text/css" href="../css/backer/UsersList.css"/>
	</head>
	<body>
		<div class="head-div">
			<i class="layui-icon layui-icon-list">&nbsp;/&nbsp;&nbsp;信息管理&nbsp;&nbsp;/&nbsp;&nbsp;发布信息</i>
		</div>
		<div class="maintemplate"><br /><br />


			<div style="margin:0px auto; width: 98%;margin-top: -20px;">
				<table id="demo" lay-filter="test" style="" ></table>
			</div>



		</div>
	</body>
	<script>
		layui.use('table', function(){
			var table = layui.table;

			//第一个实例
			table.render({
				elem: '#demo'
				,height: 400
				,limit:8
				,url: 'http://localhost:8080/backer/userslist' //数据接口
				,page : { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
					layout : ['prev', 'page', 'next' ], //自定义分页布局
					groups : 2, //只显示 3 个连续页码
					first : '首页', //首页
					prev : '上一页',
					next : '下一页',
					last : '尾页', //尾页
					curr : 1, //第几页，默认值是1
					align:'right',
					theme:'text-align:right;'
				},cols:
				[
					[ //表头
						{field: 'userId', title: '用户名', width:210,align:'center'}
						,{field: 'linkman', title: '联系人', width:210,align:'center'}
						,{field: 'communityName', title: '社区名称', width: 210,align:'center'}
						,{title: '性别', width: 210,align:'center',
							templet: function (d) {
								return d.sex?"男":"女";
							}
					}
						,{field: 'phone', title: '手机号', width: 210,align:'center'}
						,{title: '角色名称', width: 210,align:'center',
							templet: function (d) {
								return d.role.roleid==1?"管理员":"普通用户";
							}
						}
					]
				]
			});

		});
	</script>
</html>
